//import style from '@/assets/trends.module.scss';

import { Home, useTouchBottom } from '@/components';
import { HttpResponse } from '@/utils';

export interface ProjectProps {
    children?: string | React.ReactElement | React.ReactElement[];
}

function Rtrend({ page }: { page: number }) {
    const { data: res } = useSwr<
        HttpResponse<{
            address: string;
            city: string;
            id: number;
            img: string;
            msg: string;
            name: string;
            openTime: string;
            price: number;
            province: string;
        }[]>
    >(`trend/${page}?uid=${localStorage.getItem('id')}`, axios.get);
    const ls = ObjectUtils.wantArray(res?.data);
    return (
        <>
            {ls.map((item) => (
                <Home.trend key={Math.random()} data={item} />
            ))}
        </>
    );
}

function Project({ children }: ProjectProps) {
    const [bottom] = useTouchBottom(0);
    const [page, set_page] = useState(1);
    const [trends, set_trends] = useState<React.ReactElement[]>([]);

    useEffect(() => {
        set_trends([...trends, <Rtrend page={page} key={Math.random()} />]);
    }, [page]);
    useEffect(() => {
        if (bottom) set_page(page + 1);
    }, [bottom]);

    return (
        <>
            <ul>
                <div style={{ display: 'none' }}>
                    <Rtrend page={page + 1} />
                </div>
                {trends}
            </ul>
        </>
    );
}

export default Project;
